<template>
    <div class="dialog_info">
      <div class="dialog_info_title" >
        <div class="water-table">
          <el-row>
            <div class="subtitle">基本信息</div>
              <div class="JibenTable">
                <ul>
                  <li><div><div>县（区、市、旗）名称</div><div>{{TybDetailDataList.CADNM ? TybDetailDataList.CADNM : '--' }}</div></div></li>
                  <li><div><div>县（区、市、旗）代码</div><div>{{TybDetailDataList.CADCD ? TybDetailDataList.CADCD : '--' }}</div></div></li>
                  <li><div><div>乡镇名称</div><div>{{TybDetailDataList.TADNM ? TybDetailDataList.TADNM : '--' }}</div></div></li>
                  <li><div><div>乡镇代码</div><div>{{TybDetailDataList.TADCD ? TybDetailDataList.TADCD : '--' }}</div></div></li>
                  <li><div><div>防治对象名称</div><div>{{TybDetailDataList.ADNM ? TybDetailDataList.ADNM : '--' }}</div></div></li>
                  <li><div><div>防治对象代码</div><div>{{TybDetailDataList.ADCD ? TybDetailDataList.ADCD : '--' }}</div></div></li>
                  <li><div><div>经度</div><div>{{TybDetailDataList.LGTD ? TybDetailDataList.LGTD : '--' }}</div></div></li>
                  <li><div><div>纬度</div><div>{{TybDetailDataList.LTTD ? TybDetailDataList.LTTD : '--' }}</div></div></li>
                </ul>
              </div>
          </el-row>
          <el-row class="villagecont">
            <div class="subtitle">临界雨量修正</div>
            <el-table :data="TybDetailDataList.HSDT" border style="width: 100%">
              <el-table-column align="center" label="50年一遇洪水顶托">
                <el-table-column align="center" prop="DUR" label="时段" />
                <el-table-column align="center" prop="DRP50T1" label="原临界雨量（mm)" />
                <el-table-column align="center" prop="DRP50T2" label="修正后临界雨量（mm)" />
              </el-table-column>
              <el-table-column align="center" label="100年一遇洪水顶托">
                <el-table-column align="center" prop="DUR" label="时段" />
                <el-table-column align="center" prop="DRP100T1" label="原临界雨量（mm)" />
                <el-table-column align="center" prop="DRP100T2" label="修正后临界雨量（mm)" />
              </el-table-column>
            </el-table>
          </el-row>
          <el-row>
            <div class="subtitle">备注</div>
              <div class="JibenTable JibenTable03">
                <ul>
                  <li><div><div>备注</div><div>{{TybDetailDataList.REMARK ? TybDetailDataList.REMARK : '--' }}</div></div></li>
                  </ul>
              </div>
          </el-row>
        </div>
        

  
      </div>
    </div>
  </template>
<script>

import {
    GetVillageModel
} from '@/api/zyx.js'

export default {
    components: { },
    data() {
        return {
            // 历史洪痕页面数据
            TybDataList: [],
            // 洪痕点详情数据
            TybDetailDataList:{},
            parameter: {},
            PionId:undefined, //选中的点

        }
    },
    computed: {
        basin() {
            return this.$store.getters.basin
        }
    },
    watch: {
        
    },
    created() {
        this.parameter = this.$store.getters.dlgParams.remarks
        this.getData() // 获取数据
        // console.log('点击的点',this.parameter);
        this.GetVillageData() // 获取村庄详情
        
    },
    methods: {
        // 获取数据
        getData(){
            this.TybDetailDataList =this.parameter
            console.log("TybDetailDataList",this.TybDetailDataList);
            
            // var url = `${mapConfig.resUrlPre}/geojson/${this.basin}/TYB.json`
            // this.$axios.get(url).then(res => {
            //     this.TybDataList = res.data.features;
            //     console.log('TYB数据',this.TybDataList);
                
            //     res.data.features.map((item) => {
            //         if(item.properties.PID == this.parameter.PID){
            //             this.TybDetailDataList = item;
            //             this.PionId=item.properties.PID
            //         }
            //     })
            // })
        },



       
    }
}
</script>
<style lang="less" scoped>
 .tab{
        border-bottom: 1px solid #335875;
        padding-bottom: 15px;
        height: auto;
        overflow: hidden;
    }
	/deep/.el-tabs__nav-scroll {
		justify-content: left !important;
	}

	.dialog_info {
    padding:5px 20px 0px  20px;
    margin-bottom: 10px;
    box-sizing: border-box;
    min-height: 100%;
    max-height: max-content;
		.dialog_info_title {
			//height: 100%;
      min-height: 100%;
      max-height: max-content;
			/deep/.el-tabs {
				height: 100%;
			}
		}

	}

	/deep/.el-tab-pane {
		height: 100%;
	}
	.water-table{
    height: 640px;
    overflow:auto;
	}
	
  .noData{
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    margin:0px;
  }

  
  //列表区域

  .JibenTable {
    width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
    margin-top: 10px;
    ul{
        display: flex;
        flex-wrap: wrap;
        background: rgba(0,165,233,0.2);
        font-size: 14px;
        padding: 0 10px ;
        width: 100%;
        li{
            box-sizing: border-box;
            width: 25%;
            border-bottom: 1px solid #3F72AA ;
            &>div{
              margin-bottom:10px ;
              margin-top:10px;
              border-left: 1px solid #3F72AA ;
              text-indent: 20px;
              background: url(../../assets/newimg/矩形.png) no-repeat left center;
              background-size: auto 66%;
              background-position:8px 8px ;
              &>:nth-child(1){
                color: #A5C2D8;
                margin-bottom: 4px;
              }
            }
        }
        &>:nth-last-child(1),>:nth-last-child(2),>:nth-last-child(3),>:nth-last-child(4){
          border: none;
        }
        &>:nth-child(1),>:nth-child(5),>:nth-child(9),>:nth-child(13){
          &>div{
              text-indent: 10px !important;
              border: none;
              background-position:0 8px !important ;
          }
        }
    }
}

.JibenTable03 {
  ul{
    li{
      width: 100% !important;
    }
  }
}



.subtitle{
  height: 28px;
  line-height: 0px;
  margin: 20px 0 4px 0;
  text-indent: 4px;
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #FFFFFF;
  background: url(../../assets/dialog/dialogBT.png) no-repeat center;
  background-size: 100% 100%;
}

//表格
.villagecont{
 .el-table{
   border: 1px solid #4285A6;
 }
  .el-table /deep/thead{
    .el-table__cell{
      border: 1px solid #4285A6;
    }
  }
  .el-table /deep/tbody tr{
      border: 1px solid #4285A6;
      background: none !important;;
      
  }
  .el-table--enable-row-transition .el-table__body td.el-table__cell{
   border: 1px solid #4285A6;
  }
  .el-table /deep/th .el-table__cell, .el-table /deep/tr .el-table__cell{
   border: 1px solid #4285A6;
   border-left: none;
   border-top: none;
  }
  
}
/deep/ .el-table th.el-table__cell>.cell {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #21DDFF;
}
</style>
